<template>
	<view class="notice-bg-wrap">
		<image class="notice-bg-img" src="https://yun.qiongtuyule.com/static/img/notice/bg.png" mode="aspectFill">
		</image>
		
		<view class="notice-content">
			<!-- 顶部栏 -->
			<view class="notice-header">
				<text class="notice-title">消息</text>
				<image class="notice-clear" src="https://yun.qiongtuyule.com/static/img/notice/qingchu.png"
					@click="clearAll"></image>
			</view>
			<!-- 消息列表 -->
			<view v-for="item in noticeList" :key="item.id" class="notice-card" @click="goDetail(item)">
				<view class="notice-card-row">
					<text class="notice-card-title">{{ item.title }}</text>
					<image v-if="!item.read" class="notice-dot" src="/static/img/notice/weidu.png"></image>
				</view>
				<view class="notice-card-content">{{ item.content }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				statusBarHeight: 0,
				noticeList: [
					// {
					// 	id: 1,
					// 	title: '骊山项目',
					// 	content: '2025.03.08 11:22:23 设备:DEF5238584监测发生异常请...',
					// 	read: false
					// },
					// {
					// 	id: 2,
					// 	title: '华山项目',
					// 	content: '2025.03.08 10:15:42 设备:DEF5238555监测发生异常请...',
					// 	read: false
					// },
					// {
					// 	id: 3,
					// 	title: '[系统通知]新版本升级通知',
					// 	content: '2025.03.07 10:15:42 关于2.0.2版本升级公告，具体升级...',
					// 	read: true
					// },
					// {
					// 	id: 4,
					// 	title: '测试项目A',
					// 	content: '2025.03.09 09:00:00 设备:DEF1111111测试消息内容A...',
					// 	read: false
					// },
					// {
					// 	id: 5,
					// 	title: '测试项目B',
					// 	content: '2025.03.09 09:05:00 设备:DEF2222222测试消息内容B...',
					// 	read: true
					// },
					// {
					// 	id: 6,
					// 	title: '测试项目C',
					// 	content: '2025.03.09 09:10:00 设备:DEF3333333测试消息内容C红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
					// 	read: true
					// },
					// {
					// 	id: 7,
					// 	title: '测试项目D',
					// 	content: '2025.03.09 09:20:00 设备:DEF4444444测试消息内容D这是一条很长很长很长很长很长很长很长很长很长很长的消息，用于测试省略号和红点显示...',
					// 	read: false
					// },
				]
			}
		},
		computed: {
			...mapState([
				"userInfo", "location"
			]),
		},
		onShow() {
			if (this.userInfo.token == undefined) {
				this.loginOut();
				return
			}
			this.fetchNoticeList();
			const readIds = uni.getStorageSync('noticeReadIds') || [];
			this.noticeList.forEach(n => {
				n.read = readIds.includes(n.id);
			});
			this.getStatusBarHeight();
		},
		methods: {
			loginOut() {
				this.$lib.$store.commit('clearUserInfo')
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			getStatusBarHeight() {
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight;
			},
			clearAll() {
				this.noticeList.forEach(n => n.read = true);
				this.saveReadStatus();
				uni.showToast({
					title: '全部已读',
					icon: 'none'
				});
			},
			goDetail(item) {
				if (!item.read) {
					item.read = true;
					this.saveReadStatus();
				}
				uni.navigateTo({
					url: '/pages/notice/detail?id=' + item.id
				});
			},
			saveReadStatus() {
				const readIds = this.noticeList.filter(n => n.read).map(n => n.id);
				uni.setStorageSync('noticeReadIds', readIds);
			},
			limitContent(str) {
				const maxLen = 45;
				return str.length > maxLen ? str.slice(0, maxLen) + '...' : str;
			},
			async fetchNoticeList() {
				const res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.noticeList, // 确保该地址正确
					data: {},
					needLogin: true
				});
				if (res.code === 1) {
					const readIds = uni.getStorageSync('noticeReadIds') || [];
					this.noticeList = res.data.map(item => ({
						...item,
						read: readIds.includes(item.id)
					}));
				} else {
					uni.showToast({
						title: '消息加载失败',
						icon: 'none'
					});
				}
			},
		}
	}
</script>

<style>
	.notice-bg-wrap {
		position: relative;
		min-height: 100vh;
		width: 100vw;
		overflow: hidden;
		padding-top: 60rpx;
	}

	.notice-bg-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 0;
		object-fit: cover;
	}

	.notice-content {
		position: relative;
		z-index: 1;
		min-height: 100vh;
		width: 100vw;
		/* padding-top: 60rpx; */
	}

	.notice-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx 32rpx 18rpx 32rpx;
	}

	.notice-title {
		font-size: 44rpx;
		font-weight: bold;
		color: #222;
	}

	.notice-clear {
		width: 36rpx;
		height: 36rpx;
		margin-right: 200rpx;
	}

	.notice-card {
		background: #fff;
		border-radius: 18rpx;
		box-shadow: 0 2rpx 12rpx #e3eaf6;
		margin: 32rpx 32rpx 24rpx 32rpx;
		padding: 24rpx 28rpx 18rpx 28rpx;
		position: relative;
	}

	.notice-card-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.notice-card-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #222;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.notice-dot {
		width: 16rpx;
		height: 16rpx;
		margin-left: 12rpx;
	}

	.notice-card-content {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		min-width: 0;
	}
</style>